<template>
	<div>
	  <div id="article" class="article">
		<el-tag>概念来源</el-tag>
		<h1>{{ concept }}
		</h1>
		<p>{{ descrip }}</p>
		<el-tag>相关文章</el-tag>
		<template  v-for="(article, i) in articles">
			<h1 :key="i + 'title'"> {{ article.title }}
			</h1>
			<p :key="i + 'descrip'">{{ article.describe }}</p>
		</template>
	  </div>
	  <div class="demonstration">
		<el-pagination ref="pagination"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="pageSizes"
			:page-size="pageSize"
			:layout="isMobile === true ? 'total, sizes, prev, next, jumper' : 'total, sizes, prev, pager, next, jumper'"
			:total="totalSizes">
		</el-pagination>
	  </div>
	</div>
</template>
<script>
import constant from '../static/constant.json'
import common from './Common.vue'
import { _isMobile } from '../js/common.js'
export default {
  name: 'article',
  data () {
    return { 
		tmp: '',
		concept: "",
		descrip: "",
		articles: [],
		currentPage: 1,
		pageSizes: [2,4,8,16],
		pageSize: 2,
		totalSizes: 0,
		datas: [],
		userName: common.userName,
		inputWord: '',
		isMobile: false
	}
  },
  methods: {
	handleSizeChange(val) {
		console.log(`每页 ${val} 条`);
		this.$refs.pagination.handleCurrentChange();
		this.currentPage = this.$refs.pagination.currentPage;
		this.pageSize = val;
		this.getList();
		},
	handleCurrentChange(val) {
		console.log(`当前页: ${val}`);
		this.currentPage = val;
		this.getList();
		},
	getList() {
		this.articles = this.datas.slice((this.currentPage-1)*(this.pageSize),(this.currentPage-1)*(this.pageSize)+this.pageSize);
	},
	getData(inputWord) {
		this.getList();
		this.$axios
			.post("api/hellos",{
				word:inputWord
			})
			.then(res => {
				this.concept=res.data.concept;
				this.descrip=res.data.desception;
				this.articles=res.data.articles;
				this.totalSizes=this.articles.length;
			})
			.catch(e => {
			})
	}
  },
  watch: {
	'$route.query.inputWord'(newVal,oldVal) {
		this.inputWord = newVal;
		this.getData(this.inputWord);
	}
  },
  mounted() {
	// this.inputWord = this.propInputWord
	this.tmp = this.inputWord
	this.inputWord = this.$route.query.inputWord
	this.getData(this.inputWord)
	this.isMobile = _isMobile()
  }
}
</script>
<style lang="less" scoped>
  .article {
	padding: 25px 10px;
    background: gainsboro;
	border: 1px solid black;
	text-align: left;
	margin-bottom: 10px;
	.el-tag {
		// position: absolute;
		height: 36px;
		line-height: 36px;
		text-align: left;
		color: black;
		font-size: 28px;
	}
	h1 {
		font-size: 20px;
		color: royalblue;
	}
	.demonstration {
		text-align: center;
		width: 100%;
	}
  }
</style>